<template>
	<view class="content"> 
	<view class="block"></view>
		<view class="header">
			<view class="title">我的</view>
			<!-- #ifdef MP-WEIXIN -->
			<!-- 个人信息 -->
			<view class="head_meinfo">
				<navigator class="meinfo_top" url="../personData/personData">
					<view class="headimg">
						<image :src="WeHeadimgurl"></image>
					</view>
					<view class="meinfo_top_con">
						<text>{{WeNickname}}</text> <br> 
						<text style="font-size: 30rpx;">{{userInfo.mobile}}</text>
					</view>
					<image class="arrowimg" :src="imgUrl+'/static/wap/img/my_arrow@2x.png'"></image>
				</navigator>
				<!-- 进度条 -->
				<!-- <view class="progress">
					<text></text>
				</view> -->
				<view class="login_info">
					恭喜用户已登录平台{{userInfo.first_login_time+1}}天
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<!-- 个人信息 -->
			<view class="head_meinfo">
				<navigator class="meinfo_top" url="../personData/personData">
					<view class="headimg">
						<image :src="GzHeadimgurl"></image>
					</view>
					<view class="meinfo_top_con">
						<text>{{GzNickname}}</text> <br> 
						<text style="font-size: 30rpx;">{{userInfo.mobile}}</text>
					</view>
					<image class="arrowimg" :src="imgUrl+'/static/wap/img/my_arrow@2x.png'"></image>
				</navigator>
				<!-- 进度条 -->
				<!-- <view class="progress">
					<text></text>
				</view> -->
				<view class="login_info">
					恭喜用户已登录平台{{userInfo.first_login_time+1}}天
				</view>
			</view>
			<!-- #endif -->
		</view>  
		<!-- 列表 -->
		<view class="me_list">
			<!-- 费用中心 -->
			<navigator class="me_item" url="../costCenter/costCenter">
				<image class="me_item_img" :src="imgUrl+'/static/wap/img/my_one@2x.png'"></image>
				<text class="me_item_txt">费用中心</text>
			</navigator>
			<navigator class="me_item" url="../information/information">
				<image class="me_item_img" :src="imgUrl+'/static/wap/img/my_two@2x.png'"></image>
				<text class="me_item_txt">通知消息</text>
			</navigator>
			<!-- 通知消息 -->
			 <!-- #ifdef MP-WEIXIN -->
			<view class="me_item" @click="orderMe">
				<image class="me_item_img" :src="imgUrl+'/static/wap/img/my_two@2x.png'"></image>
				<text class="me_item_txt">订阅</text>
			</view>
			<!-- #endif -->
			<!-- 设置中心 -->
			<navigator class="me_item" url="../setCenter/setCenter">
				<image class="me_item_img" :src="imgUrl+'/static/wap/img/my_three@2x.png'"></image>
				<text class="me_item_txt">设置中心</text>
			</navigator>
			<!-- 意见反馈 -->
			<navigator class="me_item" url="../subFeedback/subFeedback">
				<image class="me_item_img" :src="imgUrl+'/static/wap/img/my_four@2x.png'"></image>
				<text class="me_item_txt">意见反馈</text>
			</navigator>
			<!-- 常见问题 -->
			<navigator class="me_item" url="../comProblem/comProblem">
				<image class="me_item_img" :src="imgUrl+'/static/wap/img/my_five@2x.png'"></image>
				<text class="me_item_txt">常见问题</text>
			</navigator>
			<!-- 联系客服 -->
			<navigator class="me_item" url="#">
				<image class="me_item_img" :src="imgUrl+'/static/wap/img/my_six@2x.png'"></image>
				<text class="me_item_txt">联系客服 <text class="phone">{{customerPhone}}</text></text>
			</navigator>
		</view>
	</view>
</template>

<script> 
	import util from '../../static/util.js'
	export default { 
		data() {
			return {
				imgUrl:util.globalData.imgPre,
				userInfo:'',
				customerPhone:'',
				WeHeadimgurl:'',
				WeNickname:'',
				GzHeadimgurl:'', //公众号
				GzNickname:'',
				openId:''
			}
		},
		onLoad() {
			
		},
		onShow(){
			 this.openId = uni.getStorageSync('openId');
			const token = uni.getStorageSync('token');  
			if(token){
			  this.getUserInfo();
			  this.getCustomerPhone()
			}else{
			  uni.navigateTo({
				url:'../login/loginWx'
			  })
			}
		},
		methods: {
			orderMe(){
				var that=this
				uni.requestSubscribeMessage({
				  tmplIds: ['S2-p3Wt1B8GJXt-LzoxGnSm3TlGvjUO5lblvmZIwu0g','FfUi5Y6eAyLKLLvRniJeACXcedlYurUIZLGClWUltMI','QNuDY-fyQ_7utAccAPAztBwD-aOlVBEibIJ-bD_4t4g'],
				  success (res) {  
					  that.ajax({
					  	url:'api/Subscribe/setSubscribe',
						data:{
							openid:that.openId
						},
					  	success:function(res){ 
							if(res.data.msg==200){
								setTimeout(()=>{
									uni.showToast({
										title:"订阅成功"
									})
								},100)
							}
					  	}
					    })
				  },
				  fail(err){
					  console.log(err)
				  }
				})
			},
            getUserInfo(){
				var that=this;
				that.ajax({
					url:'api/user/getUserInfo',
					success:function(res){ 
						if(res.code!==200){
							uni.removeStorage({
							    key: 'token',
							    success: function (res) { 
							    }
							});
							uni.navigateTo({
								url:'../login/loginWx'
							})
						}    
						that.userInfo=res.data
						that.WeHeadimgurl = res.data.wechatInfo.headimgurl 
						that.WeNickname = res.data.wechatInfo.nickname
						// 公众号
						that.GzHeadimgurl = res.data.wxchatInfo.headimgurl
						that.GzNickname = res.data.wxchatInfo.nickname
						uni.setStorage({
							key:'userInfo',
							data:res.data
						})
					}
				  })
			},
			getCustomerPhone(){
				var that=this;
				that.ajax({
					url:'api/user/getCustomerPhone',
					success:function(res){
						that.customerPhone = res.data
					}
				  })
			}
		}
	}
</script>

<style lang="less" scoped>
	.block{
		height: var(--status-bar-height);
		width: 100%;
		background: #249B9D;
	}
	.content {
		background-color: #F7F9FB;
	}
	
	.phone{
		font-size: 26rpx;
		color:#999;
		margin-left:20rpx;
	}
.title{
	text-align: center;
	color: #FFFFFF;
	font-size: 36rpx;
	padding-top: 20rpx;
	
}
	.header {
		position: relative;
		height: 400rpx;
		background-color: pink; 
		background: url(https://nengyuan.chuangxiangdianli.com/static/wap/img/my_bg@2x.png) no-repeat;
		background-size: 100% 100%;
		.head_meinfo{
			padding: 0 30rpx; 
			position: absolute;
			left: 0;
			right: 0;
			bottom: 116rpx;  
			.meinfo_top{
				display: flex;
				height: 125rpx;  
				
				.meinfo_top_con{
					width: 460rpx;
					font-size: 36rpx;
					line-height: 64rpx;
					color: #fff; 
					margin-left:20rpx;
					
				}
				.arrowimg{
					margin:  auto 0;
					width: 35rpx;
					height: 35rpx;
				}
			}
			// 进度条
			.progress{ 
				margin: 76rpx 0 36rpx 0;
				width: 100%;
				height: 8rpx;
				background-color: #fff;
				border-radius: 4rpx;
				overflow: hidden;
				text {
					display: block;
					width: 66%;
					height: 100%;
					background-color: #F39800;
					border-radius: 20rpx;
				}
			}
			
		} 
  }
  // 登录进度
  .login_info{
  	color: #fff;
  	font-size: 24rpx;
  	margin-top: 30rpx;
  }
	// 列表
	.me_list{   
 		position: relative;
		top: -16rpx;
		.me_item{ 
			padding: 0 30rpx;
			color: #333;
			font-size: 30rpx;
			height: 128rpx;
			line-height: 128rpx; 
			background-color: #fff;
			border-bottom: 1rpx solid #f2f2f2; 
			font-weight: bold;
			font-size: 30rpx;
			.me_item_img{
				margin-right: 34rpx;
				width: 50rpx;
				height: 50rpx; 
				vertical-align: middle;
			}
		}
		& :nth-child(even) {
			margin-bottom: 20rpx;
		}
	} 
	
	.headimg{
		width:130rpx;
		height:130rpx;
		border-radius:50%;
	}
	.headimg image{
		  overflow: hidden;
		  width:100%;
		  height:100%;
		  border-radius:50%;
	}
</style>

